<template>
  <div>
    <div class="header">
      <div class="left">
        <h1>学生管理系统</h1>
        <!-- <img src="../assets/imgs/loginimg.jpg" alt="" /> -->
      </div>
      <div class="right">
        <span class="iconfont icon-youjian1"></span>
        <div>
          <el-dropdown>
            <div class="userInfo">
              <img src="../assets/imgs/loginimg.jpg" alt="" />
              <p class="userName">{{$store.state.user.userName}}</p>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="editUserInfo"
                  >个人信息</el-dropdown-item
                >
                <el-dropdown-item @click="login_out">退出系统</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <!-- /**======个人信息====== */ -->
    <Dialog
      :show="show1"
      title="个人信息"
      @dialogClose="
        show1 = false;
        userInfo = {};
        isEidit=true
      "
    >
      <template #con>
        <el-form ref="form" :model="userInfo" label-width="80px">
          <el-form-item label="姓名" prop="userName">
            <el-input
              disabled
              v-model="userInfo.userName"
            ></el-input>
          </el-form-item>
          <el-form-item label="民族" prop="nation">
            <el-input
              v-model="userInfo.nation"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="userInfo.password"
              :disabled="isEidit"
            ></el-input>
          </el-form-item>
          <el-form-item label="出生年月" prop="bornDate">
            <el-input
              disabled
              v-model="userInfo.bornDate"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="userInfo.sex" disabled>
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户角色" prop="roleId">
            <el-select
              v-model="userInfo.roleId"
              disabled
            >
              <el-option v-for="(item,i) in roleArr" :key="i" :label="item.roleName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级" prop="classIdList" v-show="userInfo.roleId!=1">
            <el-select
              multiple
              clearable
              v-model="userInfo.classIdList"
              disabled
            >
              <el-option
                v-for="item in classArr"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学科" prop="subjectId" v-if="userInfo.roleId==2">
            <el-select
              clearable
              collapse-tags
              size="mini"
              v-model="userInfo.subjectId"
              disabled
            >
              <el-option
                v-for="item in subjectArr"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年级" prop="grade" v-show="userInfo.roleId!=1">
            <el-input disabled v-model="userInfo.grade"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template #foot>
        <el-button size="mini" type="primary" v-if="isEidit" @click="clickEidit"
          >修改</el-button
        >
        <el-button
          v-else
          size="mini"
          type="success"
          :disabled="$store.state.btnDisabled"
          @click="save"
          >保存</el-button
        >
      </template>
    </Dialog>
  </div>
</template>

<script>
import Api from "../api/login.js";
import Api2 from "@/api/userInfo.js";
import Api3 from "@/api/class.js";
import Api4 from "@/api/subject.js";
import Api5 from "@/api/role.js";
export default {
  data() {
    var checkOldPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("不能为空"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.pwdForm.newPassWord2 !== "") {
          this.$refs.pwdForm.validateField("newPassWord2");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.pwdForm.newPassWord) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      /**======个人信息====== */
      show1: false,
      classArr: [], //班级
      subjectArr: [],
      roleArr:[],
      userInfo: {
        userName: null,
        sex: null,
        nation: null,
        bornDate: null,
        password: null,
        roleName: null,
        classIdList: null,
        subjectId: null,
        className: null,
        subjectName: null,
        grade: null,
      },
      isEidit: true,
    };
  },
  methods: {
    // 获取个人信息
    async getUserInfo() {
      let re = await Api2.getUserInfo_Api({
        userId: this.$store.state.user.id,
      });
      let { code, msg } = re;
      if (code == "SUCCESS") {
        this.userInfo = re.result;
      }
    },
    // 点击修改按钮
    clickEidit() {
      this.isEidit = false;
    },
    // 修改个人信息
    async save() {
      let data={...this.userInfo}
      let re = await Api2.editUserInfo_Api(data);
      let { code, msg } = re;
      if (code == "SUCCESS") {
        this.$message({
          type: "success",
          message: msg,
        });
        this.isEidit = true;
      }
    },
    /**==============个人信息============= */
    editUserInfo() {
      this.show1 = true;
      // console.log(this.show1);
      this.getUserInfo();
      this.getList2();
      this.getList3();
    },
    /**==============退出登录============= */
    async login_out() {
        sessionStorage.clear();
        this.$router.push("/login");
    },
    //  获取班级
    async getList2() {
      let re = await Api3.getClassList_Api({
        grade: null,
        name: null,
      });
      let { code, msg } = re;
      if (code == "SUCCESS") {
        this.classArr = re.result;
      }
    },
    //  获取学科
    async getList3() {
      let re = await Api4.getSubjectList_Api({
        name: null,
        description: null,
      });
      let { code, msg } = re;
      if (code == "SUCCESS") {
        this.subjectArr = re.result;
      }
    },
    // 获取列表
    async getList4() {
      let data = {
        roleName: null,
        describetion: null,
      };
      let re = await Api5.getRoleList_Api(data);
      let { code, msg } = re;
      if (code == "SUCCESS") {
        this.roleArr = re.result;
      }
    },
  },
  mounted() {
    this.getList4()
  },
};
</script>

<style lang="less" scoped>
.header {
  box-sizing: border-box;
  height: 60px;
  background-color: #2fa0db;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px 0 20px;
  border-bottom: 0.5px solid rgb(243, 236, 236);
  //   LOGO
  .left {
    img {
      width: 80px;
      height: 40px;
    }
  }
  .right {
    width: 220px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // 邮件
    .iconfont {
      font-size: 32px;
      color: #fff;
      cursor: pointer;
    }
    // 个人信息
    .userInfo {
      width: 140px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .userName {
        width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #fff;
      }
    }
  }
}
h1{
  font-size:20px;
  font-weight: 600;
  font-family:'Courier New', Courier, monospace;
}
</style>